import React, { useState, useEffect } from 'react';
import styled from 'styled-components';
import logger from '../../../utils/logger';

const PageContainer = styled.div`
  background: white;
  border-radius: 8px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
`;

const PageHeader = styled.div`
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
`;

const PageTitle = styled.h1`
  font-size: 24px;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
`;

const Button = styled.button`
  background-color: #3b82f6;
  color: white;
  border: none;
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.2s;

  &:hover {
    background-color: #2563eb;
  }

  &:disabled {
    background-color: #9ca3af;
    cursor: not-allowed;
  }
`;

const Section = styled.div`
  margin-bottom: 32px;
`;

const SectionTitle = styled.h2`
  font-size: 18px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 16px;
`;

const FinanceManagement = () => {
  const [stats, setStats] = useState({
    totalRevenue: 0,
    pendingWithdrawals: 0,
    completedTransactions: 0,
    activeSubscriptions: 0,
  });

  useEffect(() => {
    // 初始化时记录页面加载日志
    logger.info('进入财务管理页面', { securityLevel: '敏感操作' });
    
    // 模拟API获取财务数据
    const fetchFinancialData = async () => {
      try {
        // 模拟网络延迟
        await new Promise(resolve => setTimeout(resolve, 500));
        
        // 模拟财务数据
        const mockData = {
          totalRevenue: 1285600,
          pendingWithdrawals: 32800,
          completedTransactions: 4562,
          activeSubscriptions: 1245
        };
        
        setStats(mockData);
        logger.info('成功获取财务数据');
      } catch (error) {
        logger.error('获取财务数据失败', { error: error.message });
      }
    };
    
    fetchFinancialData();
  }, []);

  return (
    <PageContainer>
      <PageHeader>
        <PageTitle>财务管理</PageTitle>
        <div>
          <Button onClick={() => logger.info('导出财务报表', { action: 'export', securityLevel: '敏感操作' })}>导出报表</Button>
        </div>
      </PageHeader>

      <Section>
        <SectionTitle>财务概览</SectionTitle>
        <div className="grid grid-cols-4 gap-4">
          <div className="bg-blue-50 p-4 rounded-lg" style={{ color: '#334155' }}>
            <div className="text-sm">总收入</div>
            <div className="text-2xl font-bold">¥{stats.totalRevenue.toLocaleString()}</div>
          </div>
          <div className="bg-yellow-50 p-4 rounded-lg" style={{ color: '#334155' }}>
            <div className="text-sm">待处理提现</div>
            <div className="text-2xl font-bold">¥{stats.pendingWithdrawals.toLocaleString()}</div>
          </div>
          <div className="bg-green-50 p-4 rounded-lg" style={{ color: '#334155' }}>
            <div className="text-sm">已完成交易</div>
            <div className="text-2xl font-bold">{stats.completedTransactions}</div>
          </div>
          <div className="bg-purple-50 p-4 rounded-lg" style={{ color: '#334155' }}>
            <div className="text-sm">活跃订阅</div>
            <div className="text-2xl font-bold">{stats.activeSubscriptions}</div>
          </div>
        </div>
      </Section>

      <Section>
        <SectionTitle>交易记录</SectionTitle>
        <div className="overflow-x-auto" style={{ color: '#334155' }}>
          <table className="min-w-full divide-y divide-gray-200">
            <thead>
              <tr>
                <th className="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-800 uppercase tracking-wider">ID</th>
                <th className="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-800 uppercase tracking-wider">用户</th>
                <th className="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-800 uppercase tracking-wider">金额</th>
                <th className="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-800 uppercase tracking-wider">类型</th>
                <th className="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-800 uppercase tracking-wider">状态</th>
                <th className="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-800 uppercase tracking-wider">时间</th>
                <th className="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-800 uppercase tracking-wider">操作</th>
              </tr>
            </thead>
            <tbody className="bg-white divide-y divide-gray-200">
              {/* 交易记录列表将在这里动态生成 */}
              <tr>
                <td colSpan="7" className="px-6 py-4 text-center text-gray-800">加载中...</td>
              </tr>
            </tbody>
          </table>
        </div>
      </Section>

      <Section>
        <SectionTitle>提现管理</SectionTitle>
        <div className="overflow-x-auto" style={{ color: '#334155' }}>
          <table className="min-w-full divide-y divide-gray-200">
            <thead>
              <tr>
                <th className="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-800 uppercase tracking-wider">ID</th>
                <th className="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-800 uppercase tracking-wider">用户</th>
                <th className="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-800 uppercase tracking-wider">提现金额</th>
                <th className="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-800 uppercase tracking-wider">提现方式</th>
                <th className="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-800 uppercase tracking-wider">状态</th>
                <th className="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-800 uppercase tracking-wider">申请时间</th>
                <th className="px-6 py-3 bg-gray-50 text-left text-xs font-medium text-gray-800 uppercase tracking-wider">操作</th>
              </tr>
            </thead>
            <tbody className="bg-white divide-y divide-gray-200">
              {/* 提现记录列表将在这里动态生成 */}
              <tr>
                <td colSpan="7" className="px-6 py-4 text-center text-gray-800">加载中...</td>
              </tr>
            </tbody>
          </table>
        </div>
      </Section>
    </PageContainer>
  );
};

export default FinanceManagement;